<template>
    <div id="map_chart" style="width: 800px; height: 800px;"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import './data.json'
import * as echarts from 'echarts'
import request from '@/utils/request'

onMounted(() => {
    drawMapLine()
})

const drawMapLine = () => {
    let geoCoordMap = require('./data.json')
    const convertData = function (data) {
        const res = []
        if (data.features) {
            data.features.map(t => {
                let geoCoord = t.properties;
                if (geoCoord) {
                    res.push({
                        name: geoCoord.name,
                        value: geoCoord.adcode,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    return params.name + "\n" + params.value;    //地图上展示文字 + 数值
                                },

                            }
                        }
                    })
                }
            })
        }
        console.log(res)
        return res;
        // const res = []
        // if (data.features) {
        //     for (let i = 0; i < data.features.length; i++) {
        //         let geoCoord = data.features[i].properties
        //         if (geoCoord) {
        //             res.push({
        //                 name: geoCoord[i].name,
        //                 value: geoCoord[i].adcode
        //             })
        //         }
        //     }
        // }
        // return res
    }

    //  地图开始
    let Chart3 = echarts.init(document.getElementById('map_chart'))
    const mapData = require('./data.json')
    convertData(geoCoordMap)
    const name = '南京市'
    echarts.registerMap(name, mapData)
    Chart3.setOption({
        geo: {
            zoom: 1.1,
            map: name,
            aspectScale: 0.75,
            roam: true,
            label: {
                show: true,
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
            },
            scaleLimit: {
                min: 1,
                max: 1
            },
            emphasis: {
                label: {
                    color: '#fff',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0,0,0,0.18)',
                    borderWidth: 1,
                    areaColor: '#333354',
                    shadowColor: 'rgba(0,0,0,0.13)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 25,
                    label: {
                        show: true,
                        fontWeight: 'bold',
                        opacity: 0.54,
                        color: 'rgba(255, 255, 255, 0.6)',
                        letterSpacing: '12.3px',
                        textAlign: 'right'
                    }
                },
                emphasis: {
                    areaColor: '#353555',
                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: '#f78879'
                        },
                        {
                            offset: 0.5,
                            color: '#6af651'
                        },
                        {
                            offset: 1,
                            color: '#51b3f6'
                        }
                        ]),
                    borderWidth: 2,
                    label: {
                        color: '#fff',
                        show: true
                    }
                }
            }
        },
        // tooltip: {
        //     formatter: function (params) {
        //         console.log(params)
        //         // return e.data.displayname;
        //         return e.name
        //     }
        // },
        legend: {
            formatter: function (params) {
                console.log(params)
                // return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
            },
            tooltip: {
                show: true
            }
        },
        series: [{
            type: 'scatter',
            showEffectOn: 'render',
            zoom: 1.1,
            symbol: 'pin',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap),
            symbolSize: 50,
            hoverAnimation: true,
            rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
            }
        }]

    })
    setTimeout(function () {
        window.onresize = function () {
            Chart3.resize();
        }
        Chart3.resize();
    }, 200)
}
</script>
<style>

</style>